DualSlider
The DualSlider control displays two thumbs, allowing the user to select the start and end of a range. The selected values are available through the RangeStart and RangeEnd properties. The sliders may be constrained to a minimum or maximum distance, so that the range cannot be too great or too small, using the MinimumRange and MaximumRange properties. By default, the second slider cannot be dragged below the first slider: you can override this using the AllowOverlap property.
DualProgressBar Control
The DualProgressBar control acts similarly to a normal progress bar, but allows the progress of individual sub-operations to be shown. A second coloured bar is overlaid on the main progress bar to show the progress of the current sub-operation. The size of the overlay bar is specified using the NestedPercentage property, which is a value from 0 to 100 indicating the percentage of the main bar that should be overlaid.
You can overlay content on the progress bar (for example, to show a scale and/or current progress or operation) using the StartContent, EndContent and CenterContent properties.
Templating
You can create custom templates for these controls using the standard WPF approach. Any custom template you create must contain the following elements:
DualSlider
A DualSlider template requires separate elements for each orientation. In the following list, provide two parts for each of the following, with Horizontal and Vertical substituted for Xxx.
PART_XxxRoot | Grid containing other elements for this orientation. |
PART_XxxLargeDecreaseButton | RepeatButton which can be clicked to decrease the value. |
PART_XxxLargeIncreaseButton | RepeatButton which can be clicked to increase the value. |
PART_XxxStartThumb | Thumb which can be dragged to change the start of the range. |
PART_XxxRangeThumb | Thumb which can be dragged to move the range (change start and end values in lockstep). |
PART_XxxEndThumb | Thumb which can be dragged to change the end of the range. |
DualProgressBar
PART_Track | Border which renders the entire range of the progress bar. |
PART_Indicator | Border which renders the overall progress (Value). |
PART_NestedIndicator | Border which renders the sub-operation progress (NestedPercentage). |